<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->

<template>
  <div class="min-h-screen bg-gray-50 py-8">
    <div class="mx-auto max-w-7xl px-4">
      <div class="bg-white rounded-lg shadow">
        <!-- 表格标题 -->
        <div class="p-6 border-b border-gray-200">
          <h2 class="text-xl font-medium text-gray-900">数据列表</h2>
        </div>

        <!-- 表格内容 -->
        <div class="overflow-x-auto">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="编号" />
            <el-table-column prop="time" label="变动时间" width="180" />
            <el-table-column prop="action" label="动作" width="120" />
            <el-table-column prop="points" label="积分变动" width="120" />
            <el-table-column prop="balance" label="积分余额" width="120" />
            <el-table-column prop="remark" label="备注" width="180" />
          </el-table>
        </div>

        <!-- 分页 -->
        <div class="p-4 flex items-center justify-between border-t border-gray-200">
          <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[10, 20, 30, 50]"
              :total="total"
              layout="total, sizes, prev, pager, next"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(100);

const tableData = ref([
  {
    id: '915352117108',
    time: '2019-06-15 22:48:47',
    action: '注册',
    points: '-100.00',
    balance: '5000.00',
    remark: '5698401@qq.com'
  },
  {
    id: '915352117109',
    time: '2019-06-15 22:48:47',
    action: '注册',
    points: '-100.00',
    balance: '5000.00',
    remark: '5698401@qq.com'
  },
  {
    id: '915352117110',
    time: '2019-06-15 22:48:47',
    action: '注册',
    points: '-100.00',
    balance: '5000.00',
    remark: '5698401@qq.com'
  },
  {
    id: '915352117111',
    time: '2019-06-15 22:48:47',
    action: '注册',
    points: '-100.00',
    balance: '5000.00',
    remark: '5698401@qq.com'
  },
  {
    id: '915352117112',
    time: '2019-06-15 22:48:47',
    action: '注册',
    points: '-100.00',
    balance: '5000.00',
    remark: '5698401@qq.com'
  },
  {
    id: '915352117113',
    time: '2019-06-15 22:48:47',
    action: '注册',
    points: '-100.00',
    balance: '5000.00',
    remark: '5698401@qq.com'
  },
  {
    id: '915352117114',
    time: '2019-06-15 22:48:47',
    action: '注册',
    points: '-100.00',
    balance: '5000.00',
    remark: '5698401@qq.com'
  },
  {
    id: '915352117115',
    time: '2019-06-15 22:48:47',
    action: '注册',
    points: '-100.00',
    balance: '5000.00',
    remark: '5698401@qq.com'
  },
  {
    id: '915352117116',
    time: '2019-06-15 22:48:47',
    action: '注册',
    points: '-100.00',
    balance: '5000.00',
    remark: '5698401@qq.com'
  },
  {
    id: '915352117117',
    time: '2019-06-15 22:48:47',
    action: '注册',
    points: '-100.00',
    balance: '5000.00',
    remark: '5698401@qq.com'
  }
]);

const handleSizeChange = (val: number) => {
  pageSize.value = val;
};

const handleCurrentChange = (val: number) => {
  currentPage.value = val;
};
</script>

<style scoped>
.el-table {
  --el-table-header-bg-color: #f8fafc;
  --el-table-header-text-color: #1f2937;
  --el-table-row-hover-bg-color: #f1f5f9;
}

.el-pagination {
  justify-content: flex-end;
}
</style>

